<template>
  <div class="comment-list" style="padding: 0 15px">
    <div class="comment-item" v-for="comment in commentList" :key="comment.id">
      <el-row type="flex" align="middle">
        <el-col :span="2">
          <div style="height: 50px;width: 50px;border-radius: 50%;overflow: hidden">
            <img :src="baseImage+comment.imageSrc" style="display: block;height: 100%;width: 100%" alt="">
          </div>
        </el-col>
        <el-col :span="12">
          <h4 style="overflow: hidden;white-space: nowrap;text-overflow:ellipsis" :title="comment.commentName">{{comment.commentName}}</h4>
        </el-col>
        <el-col :span="1" :offset="9">
          <template v-if="type === 'book'">
            <el-button v-if="comment.vip.vipId === loginId" @click="deleteComment(comment.id)" type="text">删除</el-button>
          </template>
          <template v-else-if="type === 'admin'">
            <el-button @click="deleteComment(comment.id)" type="text">删除</el-button>
          </template>
          <el-button v-else @click="deleteComment(comment.id)" type="text">删除</el-button>
        </el-col>
      </el-row>
      <div style="margin-top: 15px">
        评论时间：{{comment.commentTime}}
      </div>
      <div style="margin-top: 15px">
        {{comment.content}}
      </div>
      <el-divider/>
    </div>
    <el-pagination style="text-align: center" hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit" @current-change="currentChange" :total="pageInfo.total" layout="prev,pager,next"/>
  </div>
</template>
<script>
export default {
  name: 'CommentPage',
  props: {
    type: {
      type: String,
      default: 'book'
    },
    bookId: {
      type: Number
    },
    loginId: {
      type: Number
    }
  },
  data () {
    return {
      commentList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      baseImage: process.env.VUE_APP_URL
    }
  },
  methods: {
    currentChange (val) {
      this.pageInfo.page = val
      this.getCommentList()
    },
    getCommentList () {
      if (this.type === 'book' || this.type === 'admin') {
        this.pageInfo.bookId = this.bookId
        this.$http.get('api/v1/book/comment/page', this.pageInfo).then(data => {
          if (data) {
            this.commentList = data.records.map(item => {
              return {
                ...item,
                imageSrc: item.vip.avatar,
                commentName: item.vip.name
              }
            })
            this.pageInfo.total = data.total
            this.$emit('commentTotal', data.total)
          }
        })
      } else {
        this.$http.get('api/vip/comment/page', this.pageInfo).then(data => {
          if (data) {
            this.commentList = data.records.map(item => {
              return {
                ...item,
                imageSrc: item.book.cover,
                commentName: item.book.bookName
              }
            })
            this.pageInfo.total = data.total
            this.$emit('commentTotal', data.total)
          }
        })
      }
    },
    deleteComment (id) {
      this.$confirm('确定删除该评论吗?', '提示').then(() => {
        this.$http.delete(`api/vip/comment/delete/${id}`).then(() => {
          this.$message.success('删除成功！')
          this.getCommentList()
        })
      }).catch(() => {})
    }
  },
  created () {
    this.getCommentList()
  }
}
</script>

<style scoped>

</style>
